<template>
    <div>
        <div class="w">
        <t-header></t-header>

        <div class="w">
            <!-- 歌手描述 -->
            <div class="singer-dt">
                <div class="avatar"><img :src="$store.state.currentSingerData.picUrl"></div>
                <div class="info">
                    <div class="info-name">{{$store.state.currentSingerData.name}}</div>
                    <div class="info-description">{{singerDescription}}</div>
                </div>
            </div>

            <!-- 歌手单曲 -->
            <div class="singer-title">热门歌曲</div>
            <div class="singer-dd">
                <div class="dd-title">
                    <span class="play"></span>
                    <span>歌曲</span>
                    <span>专辑</span>
                    <span>时长</span>
                </div>
                <div class="dd-music">
                    <div
                    :class="(index % 2) == 1 ? 'item-style' : ''"
                    :key="index"
                    v-for="(item, index) in singerMusic"
                    class="music-item">
                        <span @click="playMusic(item, index)" class="play iconfont">
                            {{index == currentIndexSong ? '&#xe668;' : '&#xe682;'}}
                        </span>
                        <span>{{item.name}}</span>
                        <span>{{item.al.name}}</span>
                        <span>{{item.dt | songTimer}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <t-footer
        @isPlay="isPlay($event)"
        ref="footer"></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer';
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    data() {
        return {
            // 歌手ID
            singerID: 30116848,
            // 歌手描述
            singerDescription: '',
            // 歌手热门单曲
            singerMusic: [],
            // 当前播放歌曲的索引
            currentIndexSong: 99999
        }
    },
    created () {
        if (this.$store.state.currentID == this.$route.params.id) {
            this.currentIndexSong = this.$store.state.currentPlayIndex;
        }
    },
    mounted() {
        this.singerID = this.$route.params.id;
        this.getSingerInfo(this.singerID);
        this.getSingerMusic(this.singerID);
    },
    methods: {
        // 获取歌手详情
        async getSingerInfo(id) {
            let { data: res } = await this.$http.get('/artist/desc', { params: { id } });
            this.singerDescription = res.briefDesc;
        },
        // 获取歌手单曲
        async getSingerMusic(id) {
            let { data: res } = await this.$http.get('/artists', { params: { id } });
            this.singerMusic = res.hotSongs;
        },
        // 播放歌曲
        async playMusic(item, index) {
            // 获取歌曲url
            let { data: res } = await this.$http.get('/song/url', { params: { id: item.id, br: 128000 } });
            if (res.data[0].url == null) {
                this.$message.error('当前歌曲暂无版权~~');
                return false;
            }
            this.$store.commit('setCurrentSongUrl', res.data[0].url);
            this.$store.commit('setCurrentSongInfo', item);
            
            // 触发自动播放
            this.$nextTick(() => {
                this.$store.commit('setCurrentPlayIndex', index);
                this.$refs.footer.playSong(index, item);
            })
        },
        // 判断当前是暂停还是播放
        isPlay(params) {
            this.$store.commit('setCurrentPlayIndex', params.index);
            if (this.$route.params.id) {
                this.$store.commit('setCurrentID', this.$route.params.id);
            }
            if (params.flag) {
                this.currentIndexSong = params.index;
                this.$message.success('正在播放歌曲');
            } else {
                this.currentIndexSong = 99999;
                this.$message.info('歌曲暂停播放');
            }
           
        }
    },
    filters: {
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    }
}
</script>

<style lang="less" scoped>
.singer-dt {
    padding-top: 50px;
    display: flex;
    .avatar {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    }
    .info {
        flex: 5;
        display: flex;
        flex-direction: column;
        padding-right: 20px;
        .info-name {
            font-size: 36px;
            color: #4a4a4a;
            margin-bottom: 12px;
        }
        .info-description {
            color: #999;
            line-height: 30px;
        }
    }
}

.singer-title {
    padding-left: 76px;
    font-size: 30px;
    margin-top: 50px;
}

.singer-dd {
    .dd-title {
        display: flex;
        justify-content: space-between;
        padding: 0 76px;
        margin-top: 30px;
        height: 50px;
        line-height: 50px;
        background-color: #fbfbfd;
        span {
           width: 30%;
        }
        .play {
            width: 6%;
        }
    }
    .dd-music {
        .music-item {
            display: flex;
            justify-content: space-between;
            padding: 0 76px;
            height: 50px;
            line-height: 50px;
            &:hover {
                background-color: #e8e9ed;
            }
            span {
                width: 30%;
            }
            .play {
                width: 6%;
                cursor: pointer;
                font-size: 20px;
            }
        }
        
    }
}

.item-style {
    background-color: #fbfbfd;
}
</style>